<template>
	<view class="content mainpadding">
		<!-- 类型 -->
		<view class="mainpadding ffffff border margin_bottom3">
			<view class="color_ling text_w">類型</view>
			<view class="flexleft margin_top">
				<view :class="isCard==1?'select':'noSelect'" @click="isCard=1">銀行帳戶</view>
				<view :class="isCard==2?'select':'noSelect'" @click="isCard=2">信用卡</view>
			</view>
		</view>
		<!-- 戶名 -->
		<view class="mainpadding ffffff border margin_bottom3 flexbetween">
			<view class="color_ling text_w margin_right3">戶名</view>
			<input class="text_a textright flex1" type="text" placeholder="請輸入戶名" v-model="name">
		</view>
		<!-- 银行代号 -->
		<view class="mainpadding ffffff border margin_bottom3 flexbetween" v-show="isCard==1" @click="jumpurl('/pages/workbench/yinhangdh')">
			<view class="color_ling text_w margin_right3">銀行代號</view>
			<view class="flexright">
				<input class="text_a textright flex1" type="text" placeholder="請輸入銀行代號" disabled=""  v-model="bank">
				<u-icon name="arrow-right" color="#999" size="16"></u-icon>
			</view>
		</view>
		<!-- 银行卡号 -->
		<view class="mainpadding ffffff border margin_bottom3 flexbetween" v-show="isCard==1">
			<view class="color_ling text_w margin_right3">銀行帳號</view>
			<input class="text_a textright flex1" type="number" placeholder="請輸入銀行帳號" v-model="num">
		</view>
		<!-- 銀行存摺封面 -->
		<view class="mainpadding ffffff border margin_bottom3" v-show="isCard==1">
			<view class="color_ling text_w margin_right3">銀行存摺封面</view>
			<view class="flexleft flex_wrap">
				<view class="item_image_box margin_top" v-if="image">
					<view class="item_image radius">
						<image :src="image_text" mode=""></image>
						<view class="deleteimg" @click="deleimage()"></view>
					</view>
				</view>
				<!-- 图片盒子 -->
				<view class="item_image_box margin_top" @click="uploadImg()" v-if="image==''">
					<view class="item_image radius">
						<image src="@/static/image/system/upimg.png" mode=""></image>
						<!-- <view class="deletimg"></view> -->
					</view>
				</view>
			</view>
		</view>
		<!-- 信用卡号 -->
		<view class="mainpadding ffffff border margin_bottom3 flexbetween" v-show="isCard==2">
			<view class="color_ling text_w margin_right3">信用卡號</view>
			<input class="text_a textright flex1" type="text" placeholder="請輸入信用卡號">
		</view>
		<!-- 到期日(MM/YY) -->
		<view class="mainpadding ffffff border margin_bottom3 flexbetween" v-show="isCard==2">
			<view class="color_ling text_w margin_right3">到期日(MM/YY)</view>
			<input class="text_a textright flex1" type="text" placeholder="請輸入到期日">
		</view>
		<!-- 安全碼 -->
		<view class="mainpadding ffffff border margin_bottom3 flexbetween" v-show="isCard==2">
			<view class="color_ling text_w margin_right3">安全碼</view>
			<input class="text_a textright flex1" type="text" placeholder="請輸入安全碼">
		</view>
		<view class="footer">
			<view class="submitbtn" @click="submit()">
				確認
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isCard: 1, //1储蓄卡 2信用卡
				image: "",
				name: "",
				num: "",
				bank: "",
				bank_id: "",
				image_text: "",
				listid:"",
				yhdhcolumns:[],
				yhdhshow:false,
				issubmit:false
			}
		},
		onLoad(options) {
			uni.$on("checkyhdh",data=>{
				this.bank = data.bankname;
				this.bank_dh = data.bank_dh;
				this.bank_name = data.bank_name;
			})
			if(options.id){
				this.listid = options.id
				this.getDetail()
			}
		},
		onUnload() {
			uni.$off("checkyhdh")
		},
		methods: {
			yhdhconfirm(e){
				console.log(e);
				this.bank = e.value[0].bankname;
				this.bank_dh = e.value[0].bank_dh;
				this.bank_name = e.value[0].bank_name;
				this.yhdhshow = false
			},
			getDetail(){
				this.http.request('/api/shop/deailBanke', 'POST',{
					id:this.listid,
					shop_id: uni.getStorageSync("shop_id"),
				} ).then(res => {
					this.bank = res.data.bank;
					this.bank_dh = res.data.bank_dh;
					this.bank_name = res.data.bank_name;
					this.image = res.data.image
					this.image_text =this.imgUrlUser + res.data.image
					this.num = res.data.num
					this.isCard = res.data.type
					this.name = res.data.name
				})
			},
			submit() {
				if(this.issubmit) return
				if (this.name == "") {
					this.http.toast("請輸入戶名")
					return false
				}
				if (this.isCard == 1) {
					if (this.bank == "") {
						this.http.toast("請輸入銀行代號")
						return false
					}
					if (this.bank == "") {
						this.http.toast("請輸入銀行帳號")
						return false
					}
					if (this.bank == "") {
						this.http.toast("請上傳銀行存摺封面")
						return false
					}
				}
				this.issubmit = true
				let data = {
					name: this.name,
					type: this.isCard,
					bank: this.bank,
					bank_dh: this.bank_dh,
					bank_name: this.bank_name,
					num: this.num,
					image: this.image,
					shop_id: uni.getStorageSync("shop_id"),
				}
				let url = "/api/shop/addBanke"
				if(this.listid){
					url = "/api/shop/editBanke"
					this.$set(data,"id",this.listid)
				}
				this.http.request(url, 'POST',data ).then(res => {
					if (res.code == 1) {
						if (this.listid) {
							this.http.toast("編輯成功")
						} else {
							this.http.toast("添加成功")
						}
						setTimeout(() => {
							uni.navigateBack(1)
						}, 1000)
					} else {
						this.issubmit = false
						this.http.toast(res.msg)
					}
				})
			},
			uploadImg(value, upImgs, upImgs_text) { //上传图片
				let _this = this;
				uni.showActionSheet({
					itemList: ['相機', '相簿'],
					success: function(res) {
						// 選擇相機走0
						if (res.tapIndex == 0) {
							_this.http.chooseImage(1, ['camera']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], upImgs, upImgs_text)
								}
							}).catch(err => {});
						}
						// 選擇相簿走1
						if (res.tapIndex == 1) {
							_this.http.chooseImage(1, ['album']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], upImgs, upImgs_text)
								}
							}).catch(err => {});
						}
					},
					fail: function(res) {}
				});
			},
			deleimage() {
				this.image = ""
				this.image_text = ""
			},
			uploadImageService(url, upImg, upImgs_text) {
				let _this = this;
				this.http.uploadFile('/api/common/upload', url).then(res => {
					let image_item = res.fullurl;
					this.image = res.url
					this.image_text = image_item
				}).catch(err => {});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding-bottom: 150rpx;
	}

	.noSelect {
		width: 138rpx;
		height: 69rpx;
		line-height: 69rpx;
		text-align: center;
		background: rgba(102, 102, 102, .1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid rgba(102, 102, 102, .1);
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		margin-right: 30rpx;
		color: #666666;
	}

	.select {
		width: 138rpx;
		height: 69rpx;
		line-height: 69rpx;
		text-align: center;
		background: rgba(255, 133, 5, 0.1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid #FF8505;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF8505;
		margin-right: 30rpx;
		position: relative;
	}

	// .select::after {
	// 	content: '';
	// 	width: 25rpx;
	// 	height: 20rpx;
	// 	background-image: url("/static/images/mine/invoice_select.png");
	// 	background-size: 100% 100%;
	// 	position: absolute;
	// 	right: 0;
	// 	bottom: 0;
	// }

	.item_image_box {
		width: 33.33%;
	}

	.item_image {
		position: relative;
		width: 180rpx;
		height: 180rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>